import React, { useEffect, useState } from 'react';
import { Button, Tabs } from 'antd';
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import TableCom from '../TableCom/TableCom';
import { AFTER_SALE_STATE } from '../../../store/constants/order';

const AfterSaleTabCom = props => {
  const { onSearch, originTableData, searchRes } = props;
  const navigate = useNavigate();
  const [tabArr, setTabArr] = useState();
  // 配置 表格列
  const width = 100;

  // 切换 tab(不用触发 onchange 事件)===>解决1：数据改变，table 未更新问题，table数据源未改变
  const onChange = () => {};

  // 监测 搜索状态
  useEffect(() => {
    const tableColumns = [
      {
        title: '售后编号',
        width,
        dataIndex: 'soldNum',
        key: '1',
        fixed: 'left',
      },
      {
        title: '订单号',
        width: 150,
        dataIndex: 'orderNum',
        key: '2',
      },
      {
        title: '商品',
        dataIndex: 'goods',
        key: '3',
        width,
      },
      {
        title: '发货状态',
        dataIndex: 'deliverState',
        key: '4',
        width,
      },
      {
        title: '售后方式',
        dataIndex: 'soldState',
        key: '5',
        width,
      },
      {
        title: '订单金额',
        dataIndex: 'payAmt',
        key: '6',
        width,
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmt',
        key: '7',
        width: 150,
      },
      {
        title: '申请时间',
        dataIndex: 'applicationDate',
        key: '8',
        width: 200,
      },
      {
        title: '超时时间',
        dataIndex: 'timeOut',
        key: '9',
        width: 150,
      },
      {
        title: '状态',
        dataIndex: 'state',
        key: '15',
        width: 200,
        fixed: 'right',
      },
      {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 80,
        render: el => {
          const id = el.orderId;
          let Com = null;
          if (el.state === '售后成功' || el.state === '售后关闭') {
            Com = (
              <Button
                type='link'
                onClick={() => {
                  navigate('/home/order-detail', { state: { id } });
                }}>
                查看
              </Button>
            );
          } else {
            Com = (
              <Button
                type='link'
                onClick={() => {
                  navigate('/home/order-detail', { state: { id } });
                }}>
                处理
              </Button>
            );
          }
          return <>{Com}</>;
        },
      },
    ];
    let tableData = [];
    if (!onSearch) {
      tableData = [...originTableData];
    } else {
      tableData = [...searchRes];
    }
    // console.log('222', tableData);
    setTabArr([
      {
        key: 0,
        label: '全部',
        children: <TableCom tableColumns={tableColumns} tableData={[...tableData]} />,
      },
      {
        key: 1,
        label: '待商家处理',
        children: <TableCom tableColumns={tableColumns} tableData={tableData.filter(el => el.state === AFTER_SALE_STATE[0].label || el.state === AFTER_SALE_STATE[3].label)} />,
      },
      {
        key: 2,
        label: '待买家处理',
        children: <TableCom tableColumns={tableColumns} tableData={tableData.filter(el => el.state === AFTER_SALE_STATE[1].label || el.state === AFTER_SALE_STATE[2].label || el.state === AFTER_SALE_STATE[4].label || el.state === AFTER_SALE_STATE[5].label)} />,
      },
      // {
      //   key: 3,
      //   label: '客服介入',
      //   children: <TableCom tableColumns={tableColumns} tableData={tableData.filter(el => el.state === AFTER_SALE_STATE[4].label||el.state === AFTER_SALE_STATE[5].label)} />,
      // },
    ]);
  }, [onSearch, originTableData, searchRes,navigate]);

  return <Tabs onChange={onChange} type='card' items={tabArr} />;
};

export default connect(state => ({ originTableData: state.soldReducer, onSearch: state.searchReducer, searchRes: state.searchResReducer }), {})(AfterSaleTabCom);
